<template>
	<view>
		<view v-if="cartList.length" class="shop-cart" v-for="(item, index) in cartList" :key="item[selectKey]">
			<uni-icons class="delete-icon theme-color" @click="handleCartDelete(index)" type="clear" size="32rpx"></uni-icons>
			<view class="shop-info">
				<!-- 是否选中 -->
				<view class="checkbox" @click="handleTriggerSelect(item)" :class="selectCartList.includes(item[selectKey]) ? 'selected':''">
					<uni-icons class="selected-icon" v-if="selectCartList.includes(item[selectKey])" type="checkmarkempty" size="28rpx"></uni-icons>
				</view>
				
				<image mode="aspectFill" class="shop-image" :src="item.shopImage" @click="handleToDetail(item)"></image>
			</view>
			<view class="basic">
				<view class="shop-name" @click="handleToDetail(item)">{{item.shopName}}</view>
				<view class="shop-color text-mid margin-top-com" @click="handleToDetail(item)">{{item.color}};{{item.size}}</view>
				<view class="tag-list">
					<tag-list type="small" :tagList="item.shopTagList"></tag-list>
					
				</view>
				<view class="basic-footer">
					<view class="price-content theme-color">
						<view class="price">￥{{(item.price).toFixed(1) || '--'}}</view>
					</view>
					<view class="cart-num">
						<view class="symbol" style="background-color: #fff;" @click="handleOperateCount({
							type:'del', item, index
						})">-</view>
						<view class="count">
							{{item.count}}
						</view>
						<view class="symbol theme-bg-color" style="" @click="handleOperateCount({
							type:'add', item, index
						})">+</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!cartList.length" class="empty">
			<image mode="widthFix" class="empty-image" src="./empty.png"></image>
			<view class="empty-text text-low">购物车空空如也</view>
		</view>
		<view class="cart-footer flex-row-st padding-left-com">
			<view class="cart-select" @click="handleTrigerSelectAll">
				<template v-if="cartList.length">
					<view class="checkbox" :class="selectedAll ? 'selected' : ''">
						<uni-icons v-if="selectedAll" class="selected-icon" type="checkmarkempty"
							size="28rpx"></uni-icons>
					</view>
					全选
				</template>
			</view>
			<!-- <view class="theme-color margin-right-com iconfont icon-gouwuchefill" style="font-size: 30px;"></view> -->
			<view class="cart-button">
				合计:
				<view class="price-content theme-color">
					<view class="price">￥{{selectedPrice.toFixed(1)}}</view>
				</view>
				<!-- <view class="cart-submit theme-bg-color" @click="handleSubmit">选好了</view> -->
				<view class="cart-submit theme-bg-color" @click="topay">选好了</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cartList: {
				type: Array,
				default: () => []
			},
			selectCartList: {
				type: Array,
				default: () => []
			},
			selectKey: {
				type: String,
				default: '_id'
			}
		},
		watch: {
			selectCartList: {
				handler() {
					this.calculatePrice()
				},
				deep: true
			}
		},
		data() {
			return {
				selectedAll: false,
				selectedPrice: 0,
			};
		},
		methods: {
			handleOperateCount(params) {
				this.$emit('operateCount', params)
			},
			handleTriggerSelect(item) {
				this.$emit('triggerSelect', item)
			},
			handleTrigerSelectAll(item) {
				this.$emit('triggerSelectAll', this.selectedAll)
			},
			handleToDetail(item) {
				this.$emit('toDetail', item)
			},
			handleCartDelete(index) {
				this.$emit('cartDelete', index)
			},
			// handleSubmit() {
			// 	this.$emit('submit')
			// },
			topay() {
				//uni.navigateTo({
				//   url: '/pages/detail/detail'
				// });
				uni.showToast({
							title: '功能正在开发中...',
							icon: 'none',
							duration: 2000
						});
			},
			
			calculatePrice() {
				let price = 0
				const len = this.cartList.length;
				const selectedList = this.cartList.filter(item => this.selectCartList.includes(item[this.selectKey]))
				this.selectedPrice = selectedList.reduce((price, item) => {
					return price + item.count * item.price
				}, 0)
				this.selectedAll = len && len === this.selectCartList.length
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgb(246, 246, 246);
		padding-bottom: 150rpx;
	}

	.checkbox {
		display: flex;
		justify-items: center;
		align-items: center;
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		margin: 0 24rpx 0 8rpx;

		&.selected {
			padding: 2rpx;
			border: none;
			background:#EE3F4D;
			.selected-icon {
				//margin: 2rpx;
				//color: #fff !important;
			}
		}
	}

	.price-content {
		display: flex;
		align-items: flex-end;
		font-weight: 600;
		

		.price {
			font-size: 38rpx;
		}
	}

	.shop-cart {
		width: 718rpx;
		background: #fff;
		margin: 16rpx;
		padding: 16rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		display: flex;
		position: relative;
		//
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		//
		.delete-icon {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			//color: #df3e36 !important;
		}

		.shop-info {
			display: flex;
			align-items: center;

			.shop-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
		}

		.basic {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 16rpx;

			.shop-name {
				font-size: 35rpx;
				font-weight: bold;
			}
			.shop-color{
				font-size: 25rpx;
				font-weight: bold;
			}

			.tag-list {
				flex: 1;
				margin-top: 8rpx;
			}

			.basic-footer {
				display: flex;
				justify-content: space-between;

				.cart-num {
					display: flex;

					.count {
						width: 80rpx;
						text-align: center;
					}

					.symbol {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						box-shadow: 1px 1px 5px #5B5B5B;
					}
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		.empty-image {
			width: 600rpx;
			margin-top: 48rpx;
		}

		.empty-text {
			text-align: center;
			//color: rgba(0, 0, 0, .4);
		}
	}

	.cart-footer {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		box-shadow: $uni-shadow-lg;
		.cart-select {
			display: flex;
			align-items: center;
		}

		.cart-button {
			display: flex;
			align-items: center;
			.cart-submit {
				margin-left: 24rpx;
				border-radius: 60rpx;
				height: 60rpx;
				width: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color:#fff
			}
		}
	}
</style>